<template>
  <div class="picker">

    <wxc-popup ref="pop" :popupColor="backgroundColor" :show="show" @wxcPopupOverlayClicked="PopupOverlayClick"
      pos="bottom" width="750" :height="height">

      <div class="picker-nav">
        <text class="picker-title all font32">{{T('选择标的')}}</text>
        <LImage class="picker-close" :src="Config.img('ic_ai_close.png')" @click="cancel">
        </LImage>
      </div>

      <div class="picker-search">
        <div class="search-content">
          <LImage class="search-image" :src="Config.img('ic_ai_search.png')"></LImage>
          <input class="search-input" :ref="'input'" :placeholder="T('搜索标的')" v-model="text" type="text"
            @return="onReturn">
          <div class="search-but" @click="searchClick">
            <text class="font24" style="color:#1677fe">{{T('搜索')}}</text>
          </div>
        </div>
      </div>
      <div class="picker-content">
        <list class="list" :loadmoreoffset="50" @loadmore="loadMore" ref="list">
          <!-- 刷新 -->
          <refresh class="refresh" @refresh="refresh" :display="isRefresh ? 'show' : 'hide'">
            <loading-indicator class="load text2"></loading-indicator>
          </refresh>

          <cell>
            <PairCell v-for="(item, index) in dataList" :key="index" :item="item" @onClickItem="onClickItem" />

            <!-- 无更多数据 -->
            <div class="genduo" v-if="pageMax">
              <text class="genduo-text">{{T('没有更多数据')}}</text>
            </div>
          </cell>

        </list>
      </div>

    </wxc-popup>

  </div>
</template>

<script>
  import PairCell from "./pairCell.vue";
  import WxcPopup from "../pop/wxc-popup";
  import Config from "@/_js/config";
  import jhttps from "@/_js/https";
  const dom = weex.requireModule("dom");
  import jdebug from "@/_js/debug";
  import I18N from "@/_i18n/i18n";
  var T = I18N.t;

  export default {
    name: "x-pair",
    components: { WxcPopup, PairCell },
    data: () => ({
      T: T,
      Config: Config,
      height:
        (weex.config.env.deviceHeight / weex.config.env.deviceWidth) * 750 - 350,
      dataList: [],
      pageNo: 1, //页码
      isRefresh: false, //显示刷新
      pageMax: false, //turn最大页面
      isLoadinging: false, //显示加载
      text: "", //搜索内容
      keyWord: "",
    }),
    props: {
      // 是否显示 picker
      show: {
        type: Boolean,
        default: false,
      },
      // 背景色
      backgroundColor: {
        type: String,
        default: "#0C0C0C",
      },
    },
    created() {},
    mounted() {
      jdebug.log("mounted====");
      this.refresh();
    },

    methods: {
      /********************************** HTTPS*/
      refresh() {
        if (this.isRefresh || this.isLoadinging) return;
        this.isRefresh = true;
        var param = {
          pageNo: 1,
          pageSize: 20,
          keyWord: this.keyWord,
        };
        jhttps.post("indicator/getIndicatorPairList", param, true, (data) => {
          this.isRefresh = false;
          if (data.status == 200) {
            this.dataList = data.data;
            this.pageNo = 2;
            this.pageMax = data.data.length < 20;
            if (!this.pageMax) {
              this.$refs.list.resetLoadmore();
            }
          } else {
            jmodal.toast(data.msg);
          }
        });
      },

      loadMore() {
        if (this.pageMax || this.isRefresh || this.isLoadinging) return;
        this.isLoadinging = true;

        var param = {
          pageNo: this.pageNo,
          pageSize: 20,
          keyWord: this.keyWord,
        };
        jhttps.post("indicator/getIndicatorPairList", param, true, (data) => {
          this.isLoadinging = false;
          if (data.status == 200) {
            let dataList = data.data;
            this.dataList.push(...dataList);
            this.pageNo++;
            this.pageMax = data.data.length < 20;
            if (!this.pageMax) {
              this.$refs.list.resetLoadmore();
            }
          } else {
            jmodal.toast(data.msg);
          }
        });
      },
      /**********************************************输入框回调*/
      //确定键
      onReturn() {
        this.searchClick();
      },

      /********************************** 点击触发*/
      //搜索
      searchClick() {
        this.$refs.input && this.$refs.input.blur();
        this.keyWord = this.text;
        this.refresh();
      },
      onClickItem(item) {
        this.$emit("onPairClick", item);
        this.cancel(null);
      },
      cancel(e) {
        this.PopupOverlayClick(e);
      },
      PopupOverlayClick(e) {
        this.$refs.pop.hide();
        this.$emit("overlayClick", e);
      },
    },
    watch: {},
  };
</script>

<style scoped>
  .picker {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 750px;
    flex: 1;
  }
  .picker-nav {
    width: 750px;
    height: 100px;
    position: relative;
    background-color: #1677fe;
  }
  .picker-close {
    width: 35px;
    height: 35px;
    right: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .picker-title {
    color: #ffffff;
    text-align: center;
    height: 112px;
    font-size: 32px;
    line-height: 100px;
  }
  .picker-search {
    margin-top: -12px;
    width: 750px;
    height: 100px;
    border-radius: 16px;
    z-index: 99;
    background-color: #0c0c0c;
    flex-direction: row;
    padding-left: 40px;
    padding-right: 40px;
  }
  .search-content {
    flex-direction: row;
    align-items: center;
    width: 670px;
    margin-top: 20px;
    height: 80px;
    border-radius: 4px;
    background-color: #151a2a;
  }
  .search-image {
    width: 32px;
    height: 32px;
    margin-left: 20px;
    margin-right: 20px;
  }
  .search-input {
    flex: 1;
    height: 88px;
    font-size: 30px;
    color: #ffffff;
    placeholder-color: #6e7488;
  }
  .search-but {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .picker-content {
    width: 750px;
    flex: 1;
  }
  .list {
    width: 750px;
    flex: 1;
    margin-top: 2px;
  }
  .refresh {
    width: 750px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .load {
    margin-top: 16px;
    height: 40px;
    width: 40px;
  }
  .genduo {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 750px;
    height: 100px;
  }
  .genduo-text {
    font-size: 22px;
    color: #777f9b;
  }
</style>
